<h4 class="site-subtitle">1. 设计原则</h4>
<div class="site-info">
    1. 一级导航偏左靠近logo，辅助菜单偏右 <br>
    2. 顶部导航（大部分系统）：一级导航高度 <code>64px</code>，二级导航 <code>48px</code> <br>
    3. 顶部导航（展示类页面）：一级导航高度 <code>80px</code>，二级导航 <code>56px</code> <br>
    4. 布局容器 <code>.layout</code>，其下可嵌套 <code>.layout-head</code>，<code>.layout-sider</code>，<code>.layout-body</code>，<code>.layout-foot</code> 或 <code>.layout</code> 本身，可放在任何父容器中。
</div>
<h4 class="site-subtitle">2. 布局</h4>
<h5 class="site-thititle">2.1 上中下布局</h5>
<div class="site-info">
    <div class="layout">
        <div class="layout-head" style="height: 64px;line-height: 64px;background-color: #7dbcea;">顶部</div>
        <div class="layout-body" style="height: 120px;line-height: 120px;background-color: #108ee9">内容</div>
        <div class="layout-foot" style="height: 70px;line-height: 70px;background-color: #7dbcea;">底部</div>
    </div>
</div>
<h5 class="site-thititle">2.1 左中右布局</h5>
<div class="site-info">
    <p>栅格系统实现</p>
    <div class="layout">
        <div class="layout-head" style="height: 64px;line-height: 64px;background-color: #7dbcea;">顶部</div>
        <div class="layout-body" style="height: 200px;line-height: 200px;background-color: #108ee9">
            <div class="row">
                <div class="col-2" style="background-color: #108ee9;">左</div>
                <div class="col-8" style="background-color: #1faee9;">中</div>
                <div class="col-2" style="background-color: #908ee9;">右</div>
            </div>
        </div>
        <div class="layout-foot" style="height: 70px;line-height: 70px;background-color: #7dbcea;">底部</div>
    </div>
    <p>双飞翼布局实现</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout">
                    <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                    <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                    <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                </div>
            </div>
        </div>
        <div class="layout-left" style="height: 200px;line-height: 200px;background-color: #3ba0e9;">左侧边</div>
        <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">右侧边</div>
    </div>
    <p>双飞翼布局嵌套实现</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout layout-has-side">
                    <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
                        <div class="layout-middle-inner">
                            <div class="layout">
                                <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                                <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                                <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                            </div>
                        </div>
                    </div>
                    <div class="layout-left" style="height: 200px;line-height: 200px;background-color: #3ba0e9;">内容左</div>
                    <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">内容右</div>
                </div>
            </div>
        </div>
        <div class="layout-left" style="height: 200px;line-height: 200px;background-color: #3ba0e9;">左侧边</div>
        <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">右侧边</div>
    </div>
</div>
 <h5 class="site-thititle">2.3. 侧边布局</h5>
<div class="site-info">
    <p>左侧边</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout">
                    <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                    <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                    <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                </div>
            </div>
        </div>
        <div class="layout-left" style="width: 200px;height: 200px;line-height: 200px;background-color: #3ba0e9;">侧边</div>
    </div>
    <p>右侧边</p>
    <div class="layout layout-has-side">
        <div class="layout-middle" style="height: 200px;line-height: 200px;background-color: #108ee9;">
            <div class="layout-middle-inner">
                <div class="layout">
                    <div class="layout-head" style="height: 50px;line-height: 50px;background-color: #7dbcea;">顶部</div>
                    <div class="layout-body" style="height: 100px;line-height: 100px;background-color: #108ee9">内容</div>
                    <div class="layout-foot" style="height: 50px;line-height: 50px;background-color: #7dbcea;">底部</div>
                </div>
            </div>
        </div>
        <div class="layout-right" style="height: 200px;line-height: 200px;background-color: #4f92e9;">右侧边</div>
    </div>
</div>